<template>
    <Header title="市场份额详情" left-arrow />
    <div class="page">
        <div class="title">
            {{ scene == 1 ? "社区" : "商务" }}场景-市场份额分布
        </div>
        <div class="card-box">
            <van-tabs v-model:active="tabIndex" class="fe-tab" @change="changeScene">
                <van-tab v-for="(item, index) in tabList" :key="'vantab' + index" :title="item.name" :name="item.value">
                </van-tab>
            </van-tabs>

            <MSDItem
                v-if="isShow(current && current.premisesDistribution)" title="楼盘分布"
                :list="current && current.premisesDistribution"
            />
            <MSDItem
                v-if="isShow(current && current.elevatorDistribution)" title="电梯分布"
                :list="current && current.elevatorDistribution"
            />
            <MSDItem
                v-if="isShow(current && current.pointDistribution)" title="点位分布"
                :list="current && current.pointDistribution"
            />
            <MSDItem
                v-if="isShow(current && current.peopleDistribution)" title="覆盖人数"
                :list="current && current.peopleDistribution"
            />
            <MSDItem
                v-if="isShow(current && current.householdDistribution) && scene == 1" title="覆盖家庭"
                :list="current && current.householdDistribution"
            />

            <div v-if="noData" class="empty">
                <div>
                    <img src="@/assets/img/empty.png" alt="">
                    <p>暂无数据</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts"  setup>
import Header from '@/components/Header/index.vue';
import {
    Tabs as VanTabs,
    Tab as VanTab,
} from 'vant';
import { ref } from 'vue';
import MSDItem from '@/components/MSDItem/MSDItem.vue';
import { Details, Items } from '@/components/MSDItem/msd.module';
import { onMounted } from 'vue';
import { getMarketShareDetail } from '@/api/home';
import { computed } from 'vue';
import { useRoute } from 'vue-router';



const tabIndex = ref(1);
const tabList = [
    { name: '智能屏', value: 1 },
    { name: 'LCD', value: 2 },
    { name: '海报', value: 3 }
];

const allData = ref<Details[]>();

const route = useRoute();
const { query: { scene = 1, cityCode = '' } } = route;
const initData = async () => {
    const res = await getMarketShareDetail({ businessScenario: scene as number, cityCodes: [cityCode as string] }).catch(() => undefined);
    if (res) {
        allData.value = res;
    }
};
const current = computed(() => allData.value?.find(item => item.mediaType === tabIndex.value));


const isShow = (dataList: Items[] | undefined) => {

    return dataList && dataList.length > 0;
};

const noData = computed(() => {
    if (!current.value) {
        return true;
    }
    const { premisesDistribution, elevatorDistribution, pointDistribution, peopleDistribution } = current.value;
    if (!premisesDistribution.length && !elevatorDistribution.length && !pointDistribution.length && !peopleDistribution.length) {
        return true;
    }
    return false;
});

const changeScene = (value: number) => {
    tabIndex.value = value;
};
onMounted(async () => {
    await initData();
});

</script>

<style lang="scss" scoped>
.page {
    padding: 0 12px;
    padding-bottom: 50px;
}

.title {
    font-family: PingFangSC-Medium, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    margin: 16px 0;
}

.card-box {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    padding: 9px 0 16px;

    .fe-tab {
        // border-bottom: 0.5px solid #eeeeee;
        margin-bottom: 12px;
    }
}

.empty {
    display: flex;
    justify-content: center;
    min-height: 200px;
    align-items: center;

    img {
        width: 189px;
        height: 129px;
    }

    p {
        font-weight: 400;
        font-size: 14px;
        color: #b5b5b5;
        margin-top: 12px;
        text-align: center;
        height: 20px;
    }
}
</style>
